import React from 'react';
import LayoutContentWrapper from '@iso/components/utility/layoutWrapper';
import LayoutContent from '@iso/components/utility/layoutContent';
import EditableTree from "@iso/components/Tree/EditableTree";
import axios from "../../../../http";
import Card from "@iso/containers/UIElements/Card/Card.styles";
import Button from '@iso/components/uielements/button';

import Modals from '@iso/components/Feedback/Modal';

import ModalStyle from '@iso/containers/Feedback/Modal/Modal.styles';
import WithDirection from '@iso/lib/helpers/rtl';

import {Fieldset, Form, Label} from "@iso/containers/FirestoreCRUD/Article/Article.styles";
import Input from '@iso/components/uielements/input';
import Qs from 'qs'
import PageHeader from '@iso/components/utility/pageHeader';
import {convertData} from "./CategoryTreeDataUtils";
import {showErrorMessage, showSuccessMessage} from "@iso/containers/Feedback/Message/MessageUtils";
const isoModal = ModalStyle(Modals);
const Modal = WithDirection(isoModal);



export default class NoteCategory extends React.Component {


    constructor(props) {
        super(props);
        this.state={data:[],modalVisible:false,modalEditVisible:false,name:'',parentId:0};
    }

    showAddModal=(parentId)=>{
        this.setState({modalVisible:true,name:'',parentId:parentId})
    };

    handleCancel = () => {
        this.setState({modalVisible:false,parentId:0})
    };

    showEditModal=(treeNodeData)=>{
        let state={modalEditVisible:true, id:treeNodeData.id, name:treeNodeData.originTitle,parentId:treeNodeData.parentId};
        this.setState(state)
    };

    handleEditCancel = () => {
        this.setState({modalEditVisible:false,parentId:0})
    };

    onRecordChange = (event, key) => {
        let state={};
        state[key]=event.target.value;
        this.setState(state)
    };

     loadData=() =>{
        axios.post('api/oa/note/category/findMyAll', Qs.stringify({
        }),{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
            .then((response)=>{

                let  data=response.data

                let list=data.data

                list=convertData(list,0);

                this.setState({data:list});
            })
            .catch(function (error) {
                console.log(error);
            });

    }


    add=() =>{
        let entity={'name':this.state.name,'parentId':this.state.parentId};
        axios.post('api/oa/note/category/add', Qs.stringify({
            requestJson:JSON.stringify(entity)
        }),{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
            .then((response)=>{
                let  data=response.data;
                if(data.status==1){
                    this.setState({modalVisible:false})
                    this.loadData();
                    showSuccessMessage(data.message)
                }else{
                    showErrorMessage(data.message);
                }

            })
            .catch(function (error) {
                console.log(error);
            });

    }
    update=() =>{
        let entity={'name':this.state.name,'parentId':this.state.parentId,id:this.state.id};
        axios.post('api/oa/note/category/update', Qs.stringify({
            requestJson:JSON.stringify(entity)
        }),{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
            .then((response)=>{
                let  data=response.data;
                if(data.status==1){
                    this.setState({modalEditVisible:false})
                    this.loadData();
                    showSuccessMessage(data.message)
                }else{
                    showErrorMessage(data.message);
                }

            })
            .catch(function (error) {
                console.log(error);
            });

    }


    deleteById(id) {

        axios.post('api/oa/note/category/deleteById', Qs.stringify({
            id:id
        }),{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
            .then((response)=>{
                let  data=response.data;
                if(data.status==1){
                    this.loadData();
                    showSuccessMessage(data.message)
                }else{
                    showErrorMessage(data.message);
                }

            })
            .catch(function (error) {
                console.log(error);
            });

    }

   componentDidMount() {
        this.loadData()
   }


    render() {
    return (
      <LayoutContentWrapper >
          <PageHeader>
              笔记类别管理
          </PageHeader>
        <LayoutContent>

            <Modal
                visible={this.state.modalVisible}
                title="添加"
                onCancel={this.handleCancel}
                footer={[
                    <Button key="back" size="small" onClick={this.handleCancel}>
                        取消
                    </Button>,
                    <Button
                        key="submit"
                        type="primary"
                        size="small"
                        onClick={this.add}
                    >
                        确定
                    </Button>,
                ]}
            >
                <Form>
                        <Fieldset>
                            <Label>名称:</Label>
                            <Input
                                label="名称"
                                placeholder="名称"
                                value={this.state.name}
                                onChange={e => this.onRecordChange(e, 'name')}
                            />
                        </Fieldset>

                    </Form>

            </Modal>


            <Modal
                visible={this.state.modalEditVisible}
                title="编辑"
                onCancel={this.handleEditCancel}
                footer={[
                    <Button key="back" size="small" onClick={this.handleEditCancel}>
                        取消
                    </Button>,
                    <Button
                        key="submit"
                        type="primary"
                        size="small"
                        onClick={this.update}
                    >
                        确定
                    </Button>,
                ]}
            >
                <Form >
                    <Fieldset>
                        <Label>名称:</Label>
                        <Input
                            label="名称"
                            placeholder="名称"
                            value={this.state.name}
                            onChange={e => this.onRecordChange(e, 'name')}
                        />
                    </Fieldset>

                </Form>

            </Modal>

            <Card
                title='笔记类别'
                style={{ width: '100%' }}
            >
                <EditableTree data={this.state.data} clickOnAdd={(data)=>{this.showAddModal(data)}}  clickOnDelete={(data)=>{this.deleteById(data)}}  clickOnEdit={(data)=>{this.showEditModal(data)}}  />

                <Button type="primary" size='small' onClick={()=>{this.showAddModal(0)}}>添加根类别</Button>
            </Card>

        </LayoutContent>
      </LayoutContentWrapper>
    );
  }
}
